<template>
  <div class="main-page">
    <swiper :options="swiperOption">
      <swiper-slide
        v-for="(item,index) in banners"
        :key="index"
      >
        <img
          style="width:100%;height:800px"
          :src="item.pic"
          alt=""
        >
      </swiper-slide>
      <div
        class="swiper-pagination"
        slot="pagination"
      ></div>
    </swiper>
    <section class="main-content">
      <div class="text-wrapper">
        <div class="text-top">
          <p class="text-title-1">ABOUT US</p>
          <p class="text-title">绿凯园林简介</p>
          <div class="line"></div>
        </div>
        <div class="text-bottom">
          <p class="text-single">成立时间：2008年1月7日</p>
          <p class="text-single">企业精神：勤奋务实、专业专注</p>
          <p
            class="text-single"
            style="margin-bottom:30px"
          >企业宗旨：真心、用心、创心</p>
          <p
            class="text-single"
            style="margin-bottom:30px"
          >主营业务：园林景观绿化工程、园林山石景观工程、园林绿化养护及绿植租摆服务、景观苗木与山石销售、有机农庄农付产品销售</p>
          <p class="text-single">专业团队及人员：具备专业的山石景观、绿化种植与养护、园路土建、铺装、水电安装等施工团队、具有高级园林工程师、山石景观工程师、水电工程师等专业技术人员及管理人员10余人。</p>
        </div>
      </div>
      <div class="img-wrapper">
        <div class="img-green"></div>
        <img
          class="img-1"
          src="@/assets/imgs/1.jpg"
          alt=""
        >
        <img
          class="img-2"
          src="@/assets/imgs/1.jpg"
          alt=""
        >
      </div>
    </section>
    <section
      class="main-content"
      style="margin-top:160px"
    >
      <div class="img-wrapper">
        <div class="img-green"></div>
        <img
          class="img-1"
          src="@/assets/imgs/1.jpg"
          alt=""
        >
        <img
          class="img-2"
          src="@/assets/imgs/1.jpg"
          alt=""
        >
      </div>
      <div class="text-wrapper">
        <div
          class="text-top"
          style="margin-left:100px"
        >
          <p class="text-title-1">ABOUT US</p>
          <p class="text-title">苗圃基地简介</p>
          <div class="line"></div>
        </div>
        <div
          class="text-bottom"
          style="margin-left:100px"
        >
          <p
            class="text-single"
            style="margin-bottom:30px"
          >成立时间：2003年，占地面积：约200亩</p>
          <p
            class="text-single"
            style="margin-bottom:30px"
          >假植精品景观苗木：油松、对接白蜡、榆树、朴树、皂角、蒙古栎、元宝枫、紫薇、玉兰等3千余株。</p>
          <p
            class="text-single"
            style="margin-bottom:30px"
          >假植苗木：国槐、法桐、白蜡、柳树、榆树、油松、紫御李、樱花、山楂、碧桃、海棠、杏树、榆叶梅、金银木、丁香等4万余株。</p>
          <p class="text-single">储备精品景石：房山石、灵璧石、广西墨石等6千余。</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// import fetch from "@/assets/js/Fetch.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  data() {
    return {
      temperature: "26",
      swiperOption: {
        // 所有的参数同 swiper 官方 api 参数一样
        //
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "my-bullet-active",
          bulletClass: "my-bullet"
        }
      },
      banners: []
    };
  },
  mounted() {
    this.getBanner();
  },
  methods: {
    async getBanner() {
      let res = await this.$fetch("/api/getBanner", {
        type: 1
      });
      if (res.data.length) {
        this.banners = res.data;
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
};
</script>
<style lang="scss">
.main-page {
  background: white;
  min-width: 1200px;
  margin-bottom: 50px;
  .my-bullet {
    background: white;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    opacity: 0.3;
    margin: 0 10px;
    margin-bottom: 20px;
  }
  .my-bullet-active {
    background: #389d38;
    opacity: 1;
  }
  .main-content {
    margin: 0 auto;
    margin-top: 80px;
    width: 1200px;
    text-align: left;
    display: flex;
    .text-wrapper {
      width: 600px;
      .text-top {
        p {
          font-size: 38px;
          line-height: 38px;
          font-weight: bold;
        }
        .text-title-1 {
          margin-bottom: 20px;
        }
        .text-title-1 {
          font-size: 44px;
          color: #ececec;
        }
        .line {
          background: #2e9d39;
          width: 70px;
          height: 6px;
          margin-top: 20px;
        }
      }
      .text-bottom {
        margin-top: 48px;
        color: #616161;
        font-size: 16px;
        width: 500px;
        .text-single {
          line-height: 28px;
        }
      }
    }
    .img-wrapper {
      width: 600px;
      position: relative;
      height: 590px;
      img {
        width: 460px;
        height: 280px;
      }
      .img-1 {
        position: absolute;
        top: 0;
        left: 36px;
      }
      .img-2 {
        position: absolute;
        top: 310px;
        left: 140px;
      }
      .img-green {
        width: 260px;
        height: 320px;
        background: #309c39;
        position: absolute;
        top: 230px;
        left: 0px;
      }
    }
  }
}
</style>